<template>
  <!-- 导航栏 -->
  <van-nav-bar title="基本资料" left-text="返回" left-arrow @click-left="goBack" />

  <!-- 头像 -->
  <div class="user">
    <div class="user-image">
      <img :src="LoginUser.avatar" alt="" style="object-fit: cover" />
    </div>
  </div>

  <div class="clear"></div>

  <!-- 表单结构 -->
  <div class="form">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="LoginUser.nickname"
          name="nickname"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field v-model="LoginUser.mobile" name="mobile" label="手机号码" readonly />
        <van-field
          v-model="LoginUser.email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          :readonly="LoginUser.auth == '1' ? true : false"
        />
        <van-field
          v-model="LoginUser.password"
          type="password"
          name="password"
          label="登陆密码"
          placeholder="登陆密码"
        />
        <van-field name="gender" label="性别">
          <template #input>
            <van-radio-group v-model="LoginUser.gender" direction="horizontal">
              <van-radio name="0">保密</van-radio>
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="LoginUser.region"
          is-link
          readonly
          name="area"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <!-- 弹出层 -->
        <van-popup v-model:show="showArea" position="bottom">
          <van-area
            v-model="LoginUser.district"
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>

        <!-- 文件上传 -->
        <van-field name="avatar" label="修改头像">
          <template #input>
            <van-uploader v-model="avatar" :max-count="1" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          修改资料
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { areaList } from "@vant/area-data";
const { cookies } = useCookies();
const router = useRouter();
const LoginUser = reactive(cookies.get("LoginUser"));
const avatar = ref([{ url: LoginUser.avatar }]);
const showArea = ref(false);
const goBack = () => {
  router.push("/business/base/index");
};

// 地区确认选择事件
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false;
  // 解构语法
  let [province, city, district] = selectedOptions;
  let region = "";
  if (province) {
    LoginUser.province = province.value;
    region = province.text + "-";
  }
  if (city) {
    LoginUser.city = city.value;
    region += city.text + "-";
  }
  if (district) {
    LoginUser.district = district.value;
    region += district.text;
  }
  LoginUser.region = region;
};

const onSubmit = async (val) => {
  let data = {
    id: LoginUser.id,
    nickname: val.nickname,
    email: val.email,
    gender: val.gender,
    province: LoginUser.province,
    city: LoginUser.city,
    district: LoginUser.district,
  };

  // 是否修改密码
  if (val.password) {
    data.password = val.password;
  }

  // 是否修改头像
  if (val.avatar[0].file) {
    data.avatar = val.avatar[0].file;
  }

  let result = await Api.profile(data);

  if (result.code == 1) {
    showNotify({
      type: "success",
      message: result.msg,
      onClose: () => {
        router.push("/business/base/index");
      },
    });
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
</script>
<style>
@import url("/assets/css/profile.css");
</style>
